<template>
    <div>
        <h1>store单模块</h1>
        <h3>Mutation 调用方法</h3>
        <button @click='add'> 点我</button>
        <h1 >{{number}}</h1>
        <hr/>
        <h3>Getter 传递获取对象</h3>
        <button @click="girlAdd">女孩子</button>
        姓名：{{girl.name}}
        年龄：{{girl.age}}
        性别：{{girl.sex}}
        <hr></hr>
        <h3>Mutation传递参数</h3>
        <button @click="boyAdd">发男孩</button>
        "女朋友":{{boy.girlName}}
        "jiji长度":{{boy.jiji}}
        <hr></hr>
        <h3>Action分发方法 不知道干嘛 的</h3>
        分发：<button @click="faBoy()">发男孩 </button><button @click="faGirl()">发女孩</button>
        <hr/>
        发的女孩<h1>{{girl}}</h1>
        发的男孩<h1>{{boy}}</h1>
    </div>
</template>
<script>


export default {
    data(){
   return{  
        number:0,
        girl:{
            name:'',
            age:'',
            sex:''
        },
        boy:{
            girlName:'',
            jiji:''
        }
    }},
    methods:{
        add(){
         this.$store.commit('add')  ;
         this.number =  this.$store.state.count;
         
         },
         girlAdd(){
           
            this.$store.getters.girl("花花",this.number++,"美女");
            this.girl = this.$store.state.girl;

         },
         boyAdd(){
             this.$store.commit('boy',{name:'刘亦菲',diao:'18cm'})
             this.boy = this.$store.state.boy;
         },
         faBoy(){
                this.$store.dispatch('boy',{
                    name:'苍井空',
                    diao:'28cm'
                })
                this.boy  = this.$store.state.boy;
         },
        faGirl(){
                this.$store.dispatch('girl',{
                    name:'小泽星晴',
                     age:'16',
            sex:'前凸后翘啊'
                 
                })
                this.girl  = this.$store.state.girl;
         },

    
        

    }
}
</script>